<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<div class="live-demo-wrap">
    <div class="demo-1 live-demo">
        <h3>本地数据过滤</h3>
        <j-combo-select maxWidth="500"
                        [(value)]="selectedCountries"
                        [clearable]="true"
                        labelField="enName"
                        [searchable]="true"
                        placeholder="search a country..."
                        (openChange)="onLocalSearchOpen($event)"
                        (searchKeywordChange)="handleSearching($event, lpaCountries)">
            <ng-template>
                <div class="dropdown">
                    <j-tile [(selectedItems)]="selectedCountries" trackItemBy="enName" width="550px">
                        <j-tile-option *ngFor="let country of lpaCountries" [value]="country" width="100px">
                            {{country.enName}}
                        </j-tile-option>
                    </j-tile>
                </div>
            </ng-template>
        </j-combo-select>
        <p>selected countries: {{toCountriesString(selectedCountries)}}</p>
    </div>

    <div class="demo-2 live-demo">
        <h3>服务端数据过滤</h3>
        <j-combo-select maxWidth="500"
                        [(value)]="selectedCountries2"
                        [clearable]="true"
                        labelField="enName"
                        [searchable]="true"
                        [searching]="spaCountries.busy"
                        placeholder="输入中文也行"
                        (openChange)="onServerSearchOpen($event)"
                        (searchKeywordChange)="handleSearching($event, spaCountries)">
            <ng-template>
                <div class="dropdown">
                    <j-tile [(selectedItems)]="selectedCountries2" trackItemBy="enName" width="550px">
                        <j-tile-option *ngFor="let country of spaCountries" [value]="country" width="100px">
                            {{country.enName}}
                        </j-tile-option>
                    </j-tile>
                </div>
            </ng-template>
        </j-combo-select>
        <p>selected countries: {{toCountriesString(selectedCountries2)}}</p>
    </div>

    <div class="demo-3 live-demo">
        <h3>自定义过滤器</h3>
        <j-combo-select maxWidth="500"
                        [(value)]="selectedCountries3"
                        [clearable]="true"
                        labelField="enName"
                        placeholder="search a country..."
                        (openChange)="onLocalSearchOpen($event)">
            <ng-template>
                <div class="dropdown-wrap">
                    <j-input width="100%" (valueChange)="handleSearching($event, lpaCountries)">
                        <span jigsaw-prefix-icon class="fa fa-search"></span>
                    </j-input>
                    <div class="dropdown">
                        <j-tile [(selectedItems)]="selectedCountries3" trackItemBy="enName" width="550px">
                            <j-tile-option *ngFor="let country of lpaCountries" [value]="country" width="100px">
                                {{country.enName}}
                            </j-tile-option>
                        </j-tile>
                    </div>
                </div>
            </ng-template>
        </j-combo-select>
        <p>selected countries: {{toCountriesString(selectedCountries3)}}</p>
    </div>
</div>

